<template>
  <div class="w-full pb-20px">
    <div>
      <van-image
        height="143px"
        fit="cover"
        :src="getImageurl('login/bg1.png')"
      />
    </div>
    <div class="mt-30px w-full px-20px">
      <div
        class="w-full flex items-center h-49px bg-[#F0F7FF] rounded-5px mb-20px"
      >
        <div class="ml-17px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            :src="getImageurl('login/mobile.png')"
          />
        </div>

        <div>
          <van-cell-group inset>
            <van-field
              v-model="Info.mobile"
              maxlength="11"
              name="pattern"
              type="digit"
              placeholder="请输入手机号"
            />
          </van-cell-group>
        </div>
      </div>
      <div
        class="w-full flex items-center h-49px bg-[#F0F7FF] rounded-5px mb-20px"
      >
        <div class="ml-17px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            :src="getImageurl('login/password.png')"
          />
        </div>
        <div>
          <van-cell-group inset>
            <van-field
              v-model="Info.password"
              placeholder="请输入密码"
              type="password"
            >
            </van-field>
          </van-cell-group>
        </div>
      </div>

      <div
        class="w-full flex items-center h-49px bg-[#F0F7FF] rounded-5px mb-20px"
      >
        <div class="ml-17px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            :src="getImageurl('login/code2.png')"
          />
        </div>
        <div>
          <van-cell-group inset>
            <van-field v-model="Info.tj_no" placeholder="请输入邀请码" />
          </van-cell-group>
        </div>
      </div>

      <div
        @click="regitser"
        class="w-full rounded-5px flex justify-center items-center bg-[#2E95FF] text-white mt-60px h-50px"
      >
        注册
      </div>
      <div
        class="w-full flex justify-center mt-15px"
        @click="router.push('/index/login')"
      >
        <div>
          <span class="text-[#2E95FF]">立即登录</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import getImageurl from "@/util/getImageurl";
import { regUser } from "@/util/api";
import { showToast } from "vant";
import { useRouter } from "vue-router";
const pattern =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
const router = useRouter();
const Info = reactive({
  mobile: "",
  password: "",
  tj_no: "", //邀请码
});
const regitser = async () => {
  const res = await regUser(Info);
  res.code == 1 ? router.push("/index/login") : "";
  showToast(res.msg);
};
</script>

<style lang="scss" scoped>
:deep(.van-cell) {
  background-color: #f0f7ff;
}
</style>
